<template>
  <Layout nav-title="药品查询">
    <view class="medicine-page">
      <!-- 搜索栏 -->
      <view class="search-bar">
        <view class="search-icon">
          <text class="iconfont">
            <img src="../../static/UtilsImage/Search.png" alt="" />
          </text>
        </view>
        <input
          class="search-input"
          v-model="searchText"
          placeholder="输入药名/条码/公司搜索药品"
          @input="onSearch"
        />
      </view>

      <!-- 历史记录框 - 仅在无搜索文本时显示 -->
      <view class="history-box" v-if="!searchText">
        <view class="history-title-row">
          <text class="history-title">大家在搜</text>
        </view>
        <view class="history-list">
          <view
            class="history-item"
            v-for="item in historyList"
            :key="item"
            @click="onHistoryClick(item)"
          >
            <text class="history-icon">🩺</text>
            <text class="history-text">{{ item }}</text>
          </view>
        </view>
      </view>

      <!-- 药品列表 -->
      <view class="medicine-list" v-if="filteredList.length > 0">
        <view
          class="medicine-card"
          v-for="(item, idx) in filteredList"
          :key="item.id"
          @click="goToBaidu(item)"
        >
          <view class="card-left">
            <view class="card-title-row">
              <text class="medicine-title">{{ item.name }}</text>
              <text class="medicine-type" :class="getTypeColor(item.type)">
                {{ item.type }}
              </text>
            </view>
            <view class="medicine-info">规格：{{ item.spec }}</view>
            <view class="medicine-info">药品编号：{{ item.code }}</view>
            <view class="medicine-info">制药公司：{{ item.pro_unit }}</view>
          </view>
          <view class="card-right">
            <view class="search-btn">
              <text class="iconfont">&#xe8ef;</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 无结果提示 -->
      <view class="empty-tip" v-else>
        <text class="empty-icon">😕</text>
        <text class="empty-text">
          {{ searchText ? '未找到相关药品' : '暂无药品数据' }}
        </text>
      </view>
    </view>
  </Layout>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import Layout from "@/components/Layout.vue";
import { useMemberStore } from "@/store";
// 引入uni-app生命周期
import { onShow, onLoad } from "@dcloudio/uni-app";
// 引入药品查询页面接口
import { getMedicalListData } from "@/https/HomeHTTP";
// 引入药品信息数据类型
import type { Medical } from "@/types/home";

const memberStore = useMemberStore()
// 判断是否已经登录
const isLoading = ref(false)
onShow(() => {
  if (!memberStore.isLogin) {
    uni.navigateTo({
      url: "/pages/login/login",
    });
  }
});
// 药品信息数据存储
const medicineList = ref<Medical[]>([]);
const getMedicalList = async () => {
  const res = await getMedicalListData();
  medicineList.value = res.data.result; // ✅ 取 result
};
onLoad(async () => {
  try {
    // if判断一下是否已经登录 页面是否渲染
    if (memberStore.isLogin) {
      isLoading.value = true
      await Promise.all([getMedicalList()]);
      isLoading.value = false
    }
  } catch (error) {
    console.log(error);
  }
});

const searchText = ref('')
const historyList = ref(["感冒灵", "布洛芬", "六味地黄丸", "葡萄糖注射液"]);

const filteredList = computed<Medical[]>(() => {
  if (!searchText.value) return medicineList.value || [];
  return (medicineList.value || []).filter((item: Medical) => {
    return (
      item.name.includes(searchText.value) ||
      item.signid.includes(searchText.value)
    );
  });
});
function onSearch() {}

function onHistoryClick(item: string) {
  searchText.value = item;
}

function getTypeColor(type: string) {
  if (type === "处方药") return "type-green";
  if (type === "非处方药") return "type-yellow";
  return "";
}
const goToBaidu = (item: Medical) => {
  window.location.href = `https://baike.baidu.com/item/${encodeURIComponent(item.name)}`
}
</script>

<style scoped>
.medicine-page {
  background: #ededed;
  min-height: 100vh;
  padding-bottom: 40rpx;
}

/* 搜索栏样式 */
.search-bar {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(76, 175, 80, 0.15);
  margin: 40rpx 30rpx 30rpx 30rpx;
  padding: 0 30rpx;
  height: 80rpx;
}
.search-icon {
  color: #4caf50;
  font-size: 40rpx;
  margin-right: 16rpx;
}
.search-input {
  border: none;
  outline: none;
  flex: 1;
  font-size: 28rpx;
  background: transparent;
  color: #333;
}

/* 历史记录样式 */
.history-box {
  margin: 0 24rpx 30rpx;
  background: linear-gradient(90deg, #4caf50 0%, #29e6ff 100%);
  border-radius: 32rpx;
  padding: 24rpx 24rpx 16rpx 24rpx;
  box-sizing: border-box;
}
.history-title-row {
  display: flex;
  align-items: flex-end;
  margin-bottom: 16rpx;
}
.history-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
  font-style: italic;
  margin-right: 12rpx;
}
.history-underline {
  width: 48rpx;
  height: 8rpx;
  background: #fff;
  border-radius: 4rpx;
  margin-bottom: 6rpx;
}
.history-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx 24rpx;
}
.history-item {
  display: flex;
  align-items: center;
  background: transparent;
  border: 2rpx solid #fff;
  border-radius: 12rpx;
  padding: 0 24rpx;
  height: 56rpx;
  color: #fff;
  font-size: 26rpx;
  margin-bottom: 12rpx;
}
.history-item:active {
  background: #fff;
  color: #4caf50;
}
.history-icon {
  font-size: 26rpx;
  margin-right: 8rpx;
}
.history-text {
  font-size: 26rpx;
}

/* 药品列表样式 */
.medicine-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
  margin: 0 20rpx;
}
.medicine-card {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(76, 175, 80, 0.1);
  padding: 30rpx 24rpx;
}
.card-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.card-title-row {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}
.medicine-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #222;
  margin-right: 16rpx;
}
.medicine-type {
  font-size: 22rpx;
  border-radius: 8rpx;
  padding: 2rpx 14rpx;
  margin-left: 4rpx;
  font-weight: 600;
  border: 2rpx solid #4caf50;
  color: #4caf50;
  background: #eaffea;
}
.medicine-type.type-green {
  border-color: #00c853;
  color: #00c853;
  background: #eaffea;
}
.medicine-type.type-yellow {
  border-color: #ffd600;
  color: #ffd600;
  background: #fffde7;
}
.medicine-info {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 4rpx;
}
.card-right {
  display: flex;
  align-items: center;
  margin-left: 20rpx;
}
.search-btn {
  width: 60rpx;
  height: 60rpx;
  background: #eaffea;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4caf50;
  font-size: 36rpx;
  box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.1);
  transition: background 0.2s;
}
.search-btn:active {
  background: #c8f7c5;
}

/* 无结果提示 */
.empty-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 100rpx;
}
.empty-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
}
.empty-text {
  font-size: 28rpx;
  color: #888;
}

/* iconfont 字体兼容 */
.iconfont {
  font-family: "iconfont", Arial, sans-serif;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  text-align: center;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.iconfont img {
  width: 60rpx;
  height: 60rpx;
}
</style>